
import { View } from '@tarojs/components'
import React from "react";
import getIcon from "./icons"
import './index.scss'
export type TypeIcons = 'fenxiang' | 'jinbi' | 'home' | 'fabu-btn-icon1' | 'fabu-btn-icon' | 'arrow-down' | 'tianjia' | 'arrow-right' | 'edit-address' | 'menu' | 'arrow-left' | 'mine' | 'signin' | 'close-popup'
export const iconList = ["fenxiang","jinbi","home","fabu-btn-icon1","fabu-btn-icon","arrow-down","tianjia","arrow-right","edit-address","menu","arrow-left","mine","signin","close-popup"]
interface TypeProps {
  icon: TypeIcons,
  className?: string,
  color?: string | string[],
  onClick?: () => void,
  /** @example "100*120" | 120 */
  size?: string | number,
  style?: React.CSSProperties
}
function Index(props: TypeProps) {
  function toPx(p: number) {
    return p / 2 + "px"
  }
  function getWhStyle(size?: string | number) {
    const _obj: { width?: string, height?: string } = {};
    if (typeof size === "string" && size.length > 0) {
      const [w, h] = size.split("*");
      if (w) {
        _obj.width = toPx(Number(w))
        if (!h) _obj.height = toPx(Number(w))
      }
      if (h) {
        _obj.height = toPx(Number(h))
        if (!w) _obj.height = toPx(Number(h))
      }
    }
    if (typeof size === "number") {
      _obj.width = toPx(size)
      _obj.height = toPx(size)
    }
    if (!_obj.width && !_obj.height) return null
    return _obj;
  }
  const { size, icon = "", color, style } = props
  const { width = toPx(22), height = toPx(22), } = getWhStyle(size) || style || {}
  return <View onClick={props.onClick} className={"xm-icon " + props.className}
    style={{ width, height, backgroundImage: 'url("' + getIcon(icon, { color, width, height }) + '")', ...(style || {}) }}></View>
}
export default React.memo(Index)
